<template>
  <div>
  <BasicModal v-bind="$attrs" @register="userRegister" :title="getTitle" width="800px">
    <BasicTable
      :dataSource="normListData"
      style="height: 100%; width: 100%"
      bordered
      size="middle"
      rowKey="id"
      :canResize="false"
      :columns="columnsTarget"
      :pagination="false"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'indexName'">
          <a-input v-model:value="record.indexName" placeholder="请输入指标名称" style="width: 100%"></a-input>
        </template>
        <template v-if="column.key === 'indexCode'">
          <a-input v-model:value="record.indexCode" placeholder="请输入指标编码" style="width: 100%"></a-input>
        </template>
        <template v-if="column.key === 'indexBasis'">
          <a-input v-model:value="record.indexBasis" placeholder="请输入规定指标" style="width: 100%"></a-input>
        </template>
        <template v-if="column.key === 'indexType'">
          <a-select ref="select" v-model:value="record.indexType" style="width: 100px">
            <a-select-option value="大于等于">大于等于</a-select-option>
            <a-select-option value="大于">大于</a-select-option>
            <a-select-option value="小于等于">小于等于</a-select-option>
            <a-select-option value="小于">小于</a-select-option>
            <a-select-option value="区间">区间</a-select-option>
            <a-select-option value="描述">描述</a-select-option>
          </a-select>
        </template>
        <template v-if="column.key === 'actions'">
          <a-popconfirm title="确认删除？" @confirm="handleDelete(record, index)">
            <a href="#" style="color: #f03232">删除</a>
          </a-popconfirm>
        </template>
      </template>
      <!--插槽:table标题-->
      <template #tableTitle>
        <a-button type="primary" @click="handleAdd" preIcon="ant-design:plus-circle-outlined">新增</a-button>
      </template>
    </BasicTable>
    <template v-slot:footer>
      <a-button type="default" @click="closeModal"> 取消 </a-button>
      <a-button type="primary"  @click="saveOrUpdateNorm">确认</a-button>
    </template>
  </BasicModal>
</div>
</template>

<script lang="ts" setup>
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { ref, reactive, watch } from 'vue';
  import { BasicTable } from '/@/components/Table';
  import { columnsTarget } from '../LabItemsBasis.data';

  const getTitle = ref('实验基础信息指标');
  let normListData = ref([]);
  let targetListData = reactive({})
  const emit = defineEmits(['saveTarget']);
  let nullObj = {
    basisId: '',
    id: '',
    indexBasis: '',
    indexCode: '',
    indexName: '',
    indexType: '',
    itemsId: '',
    synFlag: '',
    sysOrgCode: '',
    mainBasisId:'',
    basisItemsId:'',
  };
  const [userRegister, { setModalProps, closeModal }] = useModalInner((data) => {
    setModalProps({ height: 550 });
    if(data){
      targetListData = data.record;
      // console.log('targetListData',targetListData)
      nullObj.indexCode = 'final_value';
      nullObj.basisId = targetListData.basisId;
      nullObj.itemsId =targetListData.itemsId;
      nullObj.mainBasisId =targetListData.mainBasisId;
      nullObj.basisItemsId =targetListData.id;
      normListData.value = [];
      if(targetListData.labItemsBasisIndexList){
        normListData.value = targetListData.labItemsBasisIndexList;
      }
    }
  });
  
  /**
   * 新增事件
   */
  function handleAdd() {
    const newObj = Object.assign({}, nullObj);
    normListData.value.push(newObj);
  }
  //保存数据
  const saveOrUpdateNorm = () => {  
    targetListData.labItemsBasisIndexList = normListData.value;
    // console.log('targetListData',targetListData)
    emit('saveTarget',targetListData);
    closeModal();
  };

  /**
   * 删除事件
   */
  async function handleDelete(record, index) {
    normListData.value.splice(index, 1);
  }
</script>
<style>
</style>
